<template>
  <div class="p-home">
    <div class="p-home-header">
      <van-nav-bar
        :title="activeTab?.name"
        right-text="新建图层"
        v-if="activeTab?.name == '数据采集'"
      ></van-nav-bar>
      <van-nav-bar
        :title="activeTab?.name"
        v-if="activeTab?.name == '三调图层'"
        @click-right="onAddLayer"
        right-text="上传文件"
      >
        <!--        <template #right>-->
        <!--          <van-uploader-->
        <!--            accept="application/zip,application/x-zip,application/x-zip-compressed"-->
        <!--            :after-read="onUpload"-->
        <!--          >-->
        <!--            <a href="javascript:;">上传文件</a>-->
        <!--          </van-uploader>-->
        <!--        </template>-->
      </van-nav-bar>
    </div>
    <div class="p-home-content">
      <van-empty description="暂无数据"></van-empty>
    </div>
    <div class="p-home-footer">
      <van-tabbar :fixed="false" v-model="active">
        <van-tabbar-item :icon="tab.icon" :name="tab.id" v-for="tab in tabs">{{
          tab.name
        }}</van-tabbar-item>
      </van-tabbar>
    </div>

    <van-popup
      v-model:show="popup"
      :closeable="true"
      round
      :close-on-click-overlay="false"
    >
      <van-nav-bar title="新增图层"></van-nav-bar>
      <div class="layer-form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              name="name"
              label="名称"
              v-model="layerForm.name"
              required
              placeholder="请输入名称"
              :rules="[{ required: true, message: '请输入名称' }]"
            />
            <van-field name="type" label="类型">
              <template #input>
                <van-radio-group
                  direction="horizontal"
                  v-model="layerForm.type"
                >
                  <van-radio name="folder">文件夹</van-radio>
                  <van-radio name="layer">图层</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              label="备注"
              :rows="2"
              v-model="layerForm.remark"
              placeholder="请输入备注信息"
              type="textarea"
              autosize
            >
            </van-field>
          </van-cell-group>
          <div style="margin: 32px 16px 0 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useUpload } from "@/hooks/useUpload.ts";
import { showLoadingToast, closeToast, showSuccessToast } from "vant";
import { addLayer, LayerDto } from "@/api/layer.ts";

const popup = ref(false);

const tabs = [
  {
    name: "三调图层",
    id: "layer",
    icon: "points",
  },
  {
    name: "数据采集",
    id: "tool",
    icon: "apps-o",
  },
];

const active = ref("layer");
const { onFileChange, getGeoJson } = useUpload();

const layerForm = ref<LayerDto>({
  type: "folder",
  custom: 0,
  name: "",
  parentId: null,
  weight: 0,
  remark: null,
});

const activeTab = computed(() => {
  return tabs.find((tab) => tab.id == active.value);
});

const onUpload = (result: any) => {
  onFileChange(result.file);

  showLoadingToast({
    message: "解析中...",
    forbidClick: true,
    duration: 0,
  });

  getGeoJson("utf-8").then((rep: any) => {
    alert(rep.features.length);
    closeToast();
  });
};

const onAddLayer = () => {
  popup.value = true;

  layerForm.value = {
    type: "folder",
    custom: 0,
    name: "",
    parentId: null,
    weight: null,
    remark: null,
  };
};

const onSubmit = async () => {
  console.log(layerForm.value);

  await addLayer(layerForm.value);

  showSuccessToast("创建成功");

  popup.value = false;
};
</script>

<style scoped lang="less">
.p-home {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 100%;
  &-content {
    flex: 1;
    background-color: #fff;
  }

  .layer-form {
    width: 420px;
    padding-top: 16px;
    background-color: #f1f5f7;
    padding-bottom: 16px;
  }
}
</style>
